<template>
	<scroll-view scroll-y="true" class="pageAll">
		<view v-if="orderInfo">
			<view>
				<orderInfo :info="orderInfo" :currTag="currTag" />
			</view>
			<view class="bottomBtnView" v-if="currTag === 1">
				<view v-if="orderInfo.status === 'refuse'" class="bottomBtnGroup">
					<button class="bottomBtnOne" @click="deleteOrder()" hover-class="subActive">删除订单</button>
				</view>
				<view v-else class="bottomBtnGroup">
					<button class="bottomBtn LightColor" @click="refuse" hover-class="subActive">拒绝订单</button>
					<button class="bottomBtn" @click="submitOrder" hover-class="subActive">确认订单</button>
				</view>
			</view>
			<view class="deliveryInfo" v-if="currTag === 3">
				<deliveryInfo :info="orderInfo" />
			</view>
			<view class="bottomBtnView" v-if="currTag === 2">
				<view v-if="orderInfo.status === 'canceled'" class="bottomBtnGroup">
					<button class="bottomBtnOne" @click="deleteOrder" hover-class="subActive">删除订单</button>
				</view>
				<view v-else class="bottomBtnGroup">
					<button class="bottomBtn LightColor" @click="cancel" hover-class="subActive">取消订单</button>
					<button class="bottomBtn" @click="shipOrder" hover-class="subActive">发货</button>
				</view>
			</view>
		</view>
		<nonePage v-else />
		<popupRefuse v-on:submitRufuse="submitRufuse" v-on:cancelRufuse="cancelRufuse" :modelVisible="popupVisible" :type="popupRefuseTextType" />
		<confirmFliePass v-on:cancelPass="cancelPass" v-on:submitPass="submitPass" :fliePassVisible="fliePassVisible" />
	</scroll-view>
</template>

<script>
	import popupRefuse from '../../../components/purchaseOrder/popupRefuse.vue'
	import confirmFliePass from '../../../components/purchaseOrder/confirmFliePass.vue'
	import deliveryInfo from "../../../components/purchaseOrder/deliveryInfo.vue"
	import orderInfo from '../../../components/purchaseOrder/orderInfo.vue'
	import nonePage from '../../../components/commonCom/nonePage.vue'
	import {
		HBValidate
	} from '../../../utils/tools.js'
	export default {
		data() {
			return {
				popupVisible: false,
				fliePassVisible: false,
				orderInfo: {},
				currTag: 3,
				popupRefuseTextType: 1,
				orderID: null,
			}
		},
		methods: {
			// 删除订单
			deleteOrder() {
				this.$api.orderDelete({
						id: this.orderID,
					})
					.then(res => {
						if (res.status) {
							uni.showToast({
								title: res.msg,
								duration: 1000,
								icon: 'success'
							})
							// this.$store.commit('', 1)
							setTimeout(() => {
								uni.switchTab({
									url: '../purchaseOrder/purchaseOrder'
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500,
							})
						}
					})
			},
			// 确认订单
			submitPass(value) {
				const validate = new HBValidate()
				if (validate.isFilePwd(value)) {
					this.$api.orderAffirm({
							id: this.orderID,
							order_password: value
						})
						.then(res => {
							if (res.status) {
								this.fliePassVisible = false
								uni.showToast({
									title: '确认订单成功',
									duration: 1000,
									icon: 'success'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '../purchaseOrder/purchaseOrder'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: res.msg,
									duration: 2000,
									icon: 'none'
								})
							}
						})
				} else {
					uni.showToast({
						title: '文件确认密码格式错误',
						icon: 'none',
						duration: 1500
					})
				}
			},
			// 取消确认订单
			cancelPass() {
				this.fliePassVisible = false
			},
			// 取消拒绝订单
			cancelRufuse() {
				this.popupVisible = false
			},
			// 
			submitRufuse(value) {
				if (value.type === 1) {
					// 拒绝订单
					if (value.result) {
						this.$api.orderRefuse({
								id: this.orderID,
								refuse_cause: value.result
							})
							.then(res => {
								if (res.status) {
									this.popupVisible = false
									uni.showToast({
										title: res.msg,
										duration: 1000,
										icon: 'success'
									})
									setTimeout(() => {
										uni.switchTab({
											url: '../purchaseOrder/purchaseOrder'
										})
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500,
									})
								}
							})
					} else {
						uni.showToast({
							title: '内容不能为空',
							icon: 'none',
							duration: 1500
						})
					}

				} else {
					// 取消订单
					if (value.result) {
						this.$api.orderCanceled({
								id: this.orderID,
								refuse_cause: value.result
							})
							.then(res => {
								if (res.status) {
									this.popupVisible = false
									uni.showToast({
										title: res.msg,
										duration: 1000,
										icon: 'success'
									})
									setTimeout(() => {
										uni.switchTab({
											url: '../purchaseOrder/purchaseOrder'
										})
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500,
									})
								}
							})
					} else {
						uni.showToast({
							title: '内容不能为空',
							icon: 'none',
							duration: 1500
						})
					}
				}
			},
			// 弹出取消原因弹窗
			cancel() {
				this.popupRefuseTextType = 2
				this.popupVisible = true
			},
			// 弹出拒绝原因弹窗
			refuse() {
				this.popupRefuseTextType = 1
				this.popupVisible = true
			},
			// 弹出确认订单弹窗
			submitOrder() {
				this.fliePassVisible = true
			},
			//  跳转到填写发货地址
			shipOrder() {
				uni.navigateTo({
					url: '../editShip/editShip?id=' + this.orderID
				})
			},
			// 获取订单信息
			getOrderInfo(id) {
				this.$api.orderMessage({
						id: this.orderID
					})
					.then(res => {
						if (res.status) {
							this.orderInfo = res.data
						} else {
							this.orderInfo = null
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500,
							})
						}
					})
					.catch(err => {
						this.orderInfo = null
						uni.showToast({
							title: '加载失败',
							icon: 'none',
							duration: 1500,
						})
						setTimeout(() => {
							uni.switchTab({
								url: '../purchaseOrder/purchaseOrder'
							})
						}, 1500)
					})
			}
		},
		components: {
			orderInfo,
			deliveryInfo,
			popupRefuse,
			confirmFliePass,
			nonePage,
		},
		onLoad(option) {
			this.currTag = parseInt(option.currTag)
			if (option.title) {
				uni.setNavigationBarTitle({
					title: option.title
				});
			}
			this.orderID = parseInt(option.id)
			if (this.orderID) {
				this.getOrderInfo(this.orderID)
			}
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		display: inline-block;
		padding: 17upx 17upx 0 17upx;
		position: fixed;
	}

	.bottomBtnView {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin-top: 40upx;
		padding-bottom: 17upx;
	}

	.bottomBtnGroup {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 100%;
	}

	.bottomBtn:after {
		border: none;
	}

	.bottomBtn {
		width: 344.66upx;
		height: 100upx;
		line-height: 100upx;
		background-color: #f7533e;
		color: #FFF;
		font-weight: bold;
		letter-spacing: 10upx;
		text-indent: 10upx;
	}

	.bottomBtnOne {
		height: 100upx;
		line-height: 100upx;
		background-color: #f7533e;
		color: #FFF;
		font-weight: bold;
		letter-spacing: 10upx;
		text-indent: 10upx;
		width: 100%;
	}

	.LightColor {
		background-color: #ffc8c7 !important;
		color: #666666;
	}

	.deliveryInfo {
		margin-top: 20upx;
	}

	.subActive {
		background-color: #FF0000 !important;
	}
</style>
